import { Callout } from 'nextra/components'

# Social Comments

Currently, Dream supports these comment systems:

- [Disqus](https://disqus.com/)
- [utterances](https://utteranc.es/)
- [Valine](https://valine.js.org/en/)

## Disqus

In `hugo.toml`, set:

```toml
[services]
[services.disqus]
shortname = "..."
```

<Callout type="warning">
You may have used `disqusShortname = "..."` before. This is deprecated in Hugo `0.120.0`.

Please upgrade to the new configuration. See https://gohugo.io/methods/site/disqusshortname/ for more details.
</Callout>

Disqus comments will be showed on the **Single Post Page** and **About Page**.

### Compatible with oklch colors

Disqus will detect the color scheme of the website and change the color of the comments accordingly.
However, Disqus does not support [oklch colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) which is used in Dream.

To make Disqus work with Dream, we need to make an extra hack.

First, create a custom css file in `static/css/custom.css`:

```css
[data-theme="emerald"] #disqus_thread {
  color-scheme: none;
  background-color: #fff;
  color: #333c4d;
}

[data-theme="forest"] #disqus_thread {
  color-scheme: none;
  background-color: #171213;
  color: #cbc9ca;
}
```

The `background-color` and `color` can be obtained by inspecting the website in the browser. Follow below steps:

1. Open the devtools in the browser (press `F12`).
2. Click the `html` tag in the `Elements` tab.
3. Then search for `background` in the `Styles` tab.
4. Open the color picker and transfrom the oklch format to hex format.
5. Copy them to the custom css file.

After finishing above steps, remember to include this custom css file in `customCSS` in `hugo.toml`:

```toml
[params]
[params.advanced]
customCSS = ["css/custom.css"]
```

You may want to change the default themes `emerald` and `forest` to other themes.
Refer to [light-and-dark-mode](./light-and-dark-mode.md) and update `background-color` and `color` accordingly.

## utterances

See: [utterancesRepo](params-configurations.md#utterancesrepo--g1eny0ungg1eny0unggithubio)

The utterances only takes effect on the **Single Post Page**.

## Valine

See: [valine](params-configurations.md#valine--true)

Valine only takes effect on the **Single Post Page**.
